<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			window.onload = function(){
				//获取画板对象
				var ocavBox = document.getElementById("cav");
				//获得画布
				var ocav = ocavBox.getContext('2d');
				//画线
				ocav.strokeStyle = '#0000BF';
				//线条粗细
				ocav.lineWidth = '20';
				//线的棱角 bevel round miter
				ocav.lineJoin = 'miter';
				//开始路径
				ocav.beginPath();
//				定义起点
				ocav.moveTo(200,200);
				//设置目标点
				ocav.lineTo(250,150);
				ocav.lineTo(300,200);
//				结束路径
				ocav.closePath();
				//开始画
				ocav.stroke();
				
			}
		</script>
		<style>
			#cav{
				/*宽高属性不要在样式中设置,要在canvas标签属性中设置*/
				/*width:500px;
				height:500px;*/
			}
			#box{
				width:500px;
				height:500px;
				border:1px solid red;
				margin:50px auto;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<canvas id="cav" width="500" height="500"></canvas>	
		</div>

	</body>
</html>















